<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="订单标题" prop="userName">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入订单标题"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input
              v-model="queryParams.phonenumber"
              placeholder="请输入手机号码"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="订单状态"
              clearable
              size="small"
              style="width: 240px"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.value"
                :label="dict.name"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="cyan"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:user:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <!-- <el-button
              type="info"
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
              v-hasPermi="['system:user:import']"
              >导入</el-button
            > -->
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:user:export']"
              >导出</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column fixed prop="orderNum" label="订单Id">
        </el-table-column>
        <el-table-column fixed prop="deatil" label="详情" width="300">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="8">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="scope.row.img"
                  fit="fill"
                ></el-image
              ></el-col>
              <el-col :span="16"
                >标题：{{ scope.row.title }}<br />推广平台：{{ scope.row.model
                }}<br />店铺：{{ scope.row.shopName }}</el-col
              ></el-row
            >
          </template>
        </el-table-column>
        <el-table-column fixed prop="createTime" label="下单日期">
        </el-table-column>
        <el-table-column fixed label="订单状态">
          <template slot-scope="scope">
            {{
              statusOptions[scope.row.status].name
            }}
          </template>
        </el-table-column>
        <el-table-column fixed prop="userName" label="账户名称">
        </el-table-column>
        <el-table-column fixed prop="phonenumber" label="商家手机号">
        </el-table-column>
        <el-table-column fixed prop="logistics" label="地址" width="200">
          <template slot-scope="scope">
            <el-row>
              地址：{{ scope.row.characteristic }}<br />`` 收件人：{{
                scope.row.userName
              }}
              <br />
              手机号：{{ scope.row.phone }} <br />
              微信：{{ scope.row.wechat }}
            </el-row>
          </template>
        </el-table-column>
        <el-table-column fixed prop="model" label="方式"> </el-table-column>
        <el-table-column fixed prop="workContent" label="达人提交链接" width="150"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 0"
              @click.native.stop="
                handleClick(scope.row.id, 1, scope.row.goodsId)
              "
              type="text"
              size="small"
              >同意</el-button
            >
            <el-button
              v-if="scope.row.status == 0"
              @click.native.stop="tipBusiness(scope.row)"
              type="text"
              size="small"
              >提醒商家发货</el-button
            >
            <el-button
              v-if="scope.row.status <= 0"
              type="text"
              size="small"
              @click.native.stop="closeClick(scope.row.id, 4)"
              >拒绝</el-button
            >
            <el-button
              v-if="scope.row.status == 1"
              type="text"
              size="small"
              @click.native.stop="dialogVisible = true"
              >发货</el-button
            >
            <el-button
              type="text"
              size="small"
              @click.native.stop="rowClick(scope.row)"
              >查看商品详情</el-button
            >
            <el-dialog
              title="订单发货"
              :visible.sync="dialogVisible"
              width="30%"
              :modal="false"
            >
              <div>
                <el-input
                  @focus.native.stop
                  v-model="logistics.logisticsNum"
                  placeholder="请输入订单号"
                ></el-input>
                <el-input
                  @keyup.down.native.stop
                  v-model="logistics.logisticsName"
                  placeholder="请输入快递公司"
                ></el-input>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click.native.stop="dialogVisible = false"
                  >取 消</el-button
                >
                <el-button
                  type="primary"
                  @click="sendGoods(scope.row.id, scope.row.orderNum)"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row :gutter="20">
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  adminOrder,
  updateOrder,
  adminExportOrder,
  sendGoodsLogistics,
  tipBusiness,
} from "@/api/work/goods/order";
export default {
  data() {
    return {
      loading: true,
      logistics: {
        order: "",
        orderId: "",
        logisticsNum: "",
        logisticsName: "",
      },
      queryParams: { title: "", phonenumber: "", status: 0 },
      showSearch: true,
      statusOptions: [
        { name: "待审核", value: 0 },
        { name: "代发货", value: 1 },
        { name: "待收货", value: 2 },
        { name: "已完成", value: 3 },
        { name: "已关闭", value: 4 },
        { name: "待提交", value: 5 },
        { name: "已提交", value: 6 },
        { name: "全部", value: 7 },
      ],
      dateRange: [],
      multiple: true,
      tableData: [],
      total: 0,
      dialogVisible: false,
    };
  },
  methods: {
    tipBusiness(row) {
      console.log(row);
      tipBusiness(
        `/wx/message/tip/business?memberId=${row.merchantId}&content=有达人选品【${row.title}】`
      ).then((response) => {
        this.$message("发送成功");
        console.log(response);
      });
    },
    handleExport() {
      if (this.queryParams.status === 7) {
        this.queryParams.status = "";
      }
      adminExportOrder({
        status: this.queryParams.status,
        phone: this.queryParams.phonenumber,
        title: this.queryParams.title,
      }).then((res) => {
        this.download(res.msg);
      });
    },
    sendGoods(order, orderId) {
      this.dialogVisible = false;
      this.logistics.order = order;
      this.logistics.orderId = orderId;
      console.log(this.logistics);
      sendGoodsLogistics(this.logistics).then((response) => {
        console.log(response);
        this.getList();
      });
    },
    rowClick(row) {
      if (row.goodsUrl == null || row.goodsUrl == "") {
        this.$message("商品不存在或者下架了");
      } else {
        window.location.href = row.goodsUrl;
      }
    },
    handleCurrentChange(index) {
      this.getList(index);
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.queryParams = { title: "", phonenumber: "", status: 5 };
    },
    handleDelete() {},
    getList(current = 0) {
      if (this.queryParams.status === 7) {
        this.queryParams.status = "";
      }
      this.loading = true;
      adminOrder({
        current: current,
        status: this.queryParams.status,
        phone: this.queryParams.phonenumber,
        title: this.queryParams.title,
      }).then((response) => {
        if (response.code == 200) {
          this.total = response.data.total;
          this.loading = false;
          this.tableData = response.data.list;
        }
      });
    },
    handleClick(id, status, goodsId) {
      updateOrder({
        goodsOrder: { id: id, status: status, goodsId: goodsId },
        goodsLogistics: {},
      }).then((response) => {});
    },
    closeClick(id, status) {
      updateOrder({
        goodsOrder: { id: id, status: status },
        goodsLogistics: {},
      }).then((response) => {
        this.getList();
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>